﻿#nav {
				background-color:#ffffff;
				
}



#nav ul {
	font-family: Arial, Verdana;
	font-size: 18px;
	margin: 0;
	background-color:#ffffff;
	display:flex;
	justify-content: space-around;
}

#nav img {
	padding-left:3px;

}

#nav ul li {
	display: block;
	/*  position: relative;*/
	float: left;
		
}

#nav li ul {
	display: none;
	width: 250px;

}

#nav ul li a {
    display: block;
    text-decoration:  none;
    color: #000;
    padding: 8px 16px 6px 9px;
    background-color: #ffffff;
    margin-left: 0px;
}

/*coalition*/

#coalition {
background-color:#ffffff;

}

#coalition ul {

    font-family: Arial, Verdana;
    font-size: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#coalition ul li {
    display: block;
    position: relative;
    float: left;
}

#coalition ul li a {
    display:  block;
    text-decoration: none;
    color: white;
    border-top: 1px solid white;
    padding: 5px 15px 5px 15px;
    background: #004379;
    margin-left: 1px;
}

/*#coalition ul li a:hover {
background: #E6ECF2;
}*/

#coalition li:hover ul {
    display: block;
    position: absolute;
    color:white;
    background-image: url(""); /*change this to the appropriate bg in the image folder */
    
}

#coalition li:hover li {
    float: none;
    font-size: 14px;
 
}

#coalition li:hover a { 
	background: #004379;  /*change this color - it is the background when hovered over */
	color: white;
   display: block;
   
}

#coalition li:hover li a:hover {
    background: #E6ECF2;  /*change this color - it is the background when the link is hovered over */
    color:black;
    font-size: 14px;
}

/*end coalition*/


/*road user*/

#roaduser {

background-color:#ffffff;
}


#roaduser ul {
    font-family: Arial, Verdana;
    font-size: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#roaduser ul li {
    display: block;
    position: relative;
    float: left;
}

#roaduser li ul {
    display: none;
}

#roaduser ul li a {
    display:  block;
    text-decoration: none;
    color: white;
    border-top: 1px solid white;
    padding: 5px 15px 5px 15px;
    background: #C13832;
    margin-left: 1px;
}

/*#roaduser ul li a:hover {
background: #E6ECF2;
}*/

#roaduser li:hover ul {
    display: block;
    position: absolute;
    color:white;
}

#roaduser li:hover li {
    float: none;
    font-size: 14px;
}

#roaduser li:hover a { 
	background: #C13832; /*change this color - it is the background when hovered over */
	color: white;
}

#roaduser li:hover li a:hover {
    background: #E6ECF2; /*change this color - it is the background when the link is hovered over */
    color:black;
	float: none;
    font-size: 14px;

}

/*end #road user*/

/*roadway NOW CALLED AGING IN PLACE*/

#roadway {
background-color:#ffffff;
}


#roadway ul {
    font-family: Arial, Verdana;
    font-size: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#roadway ul li {
    display: block;
    position: relative;
    float: left;
}

#roadway li ul {
    display: none;
}

#roadway ul li a {
    display:  block;
    text-decoration: none;
    color: white;
    border-top: 1px solid white;
    padding: 5px 15px 5px 15px;
    background: #009933;
    margin-left: 1px;
}

/*#roadway ul li a:hover {
background: #E6ECF2;
}*/

#roadway li:hover ul {
    display: block;
    position: absolute;
    color:white;
}

#roadway li:hover li {
    float: none;
    font-size: 14px;
}

#roadway li:hover a { 
	background: #009933; /*change this color - it is the background when hovered over */
	color: white;
}

#roadway li:hover li a:hover {
    background: #E6ECF2; /*change this color - it is the background when the link is hovered over */
    color:black;
	float: none;
    font-size: 14px;

}

/*end roadway AGING IN PLACE*/

/*vehicle*/

#vehicle {
	background-color:#ffffff;			
}

#vehicle ul {
    font-family: Arial, Verdana;
    font-size: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#vehicle ul li {
    display: block;
    position: relative;
    float: left;
}

#vehicle li ul {
    display: none;
}

#vehicle ul li a {
    display:  block;
    text-decoration: none;
    color: white;
    border-top: 1px solid white;
    padding: 5px 15px 5px 15px;
    background: #f37601;
    margin-left: 1px;
}

/*#vehicle ul li a:hover {
background: #E6ECF2;
}*/

#vehicle li:hover ul {
    display: block;
    position: absolute;
    color:white;
}

#vehicle li:hover li {
    float: none;
    font-size: 14px;
}

#vehicle li:hover a { 
	background: #f37601; /*change this color - it is the background when hovered over */
	color: white;
}

#vehicle li:hover li a:hover {
    background: #E6ECF2; /*change this color - it is the background when the link is hovered over */
    color:black;
	float: none;
    font-size: 14px;

}

/*end vehicle*/

/*laws*/

#laws {
background-color:#ffffff;
}


#laws ul {
    font-family: Arial, Verdana;
    font-size: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#laws ul li {
    display: block;
    position: relative;
    float: left;
}

#laws li ul {
    display: none;
}

#laws ul li a {
    display:  block;
    text-decoration: none;
    color: black;
    border-top: 1px solid white;
    padding: 5px 10px 5px 12px;
    background: #ffc000;
    margin-left: 1px;
}

/*#laws ul li a:hover {
background: #E6ECF2;
}*/

#laws li:hover ul {
    display: block;
    position: absolute;
    color:black;
}

#laws li:hover li {
    float: none;
    font-size: 14px;
}

#laws li:hover a { 
	background: #ffc000; /*change this color - it is the background when hovered over */
	color: black;
}

#laws li:hover li a:hover {
    background: #E6ECF2; /*change this color - it is the background when the link is hovered over */
    color:black;
	float: none;
    font-size: 14px;

}

/*end laws*/

/*findaride*/

#findaride {
background-color:#ffffff;
}


#findaride ul {
    font-family: Arial, Verdana;
    font-size: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#findaride ul li {
    display: block;
    position: relative;
    float: left;
}

#findaride li ul {
    display: none;
}

#findaride ul li a {
    display:  block;
    text-decoration: none;
    color: white;
    border-top: 1px solid white;
    padding: 5px 9px 5px 12px;
    background: #480374;
    margin-left: 1px;
}

/*#findaride ul li a:hover {
background: #E6ECF2;
}*/

#findaride li:hover ul {
    display: block;
    position: absolute;
    color:white;
    background-image: url("../images/findaride_bg.gif"); /*change this to the appropriate bg in the image folder */
}

#findaride li:hover li {
    float: none;
    font-size: 14px;
}

#findaride li:hover a { 
	background: #480374; /*change this color - it is the background when hovered over */
	color: white;
}

#findaride li:hover li a:hover {
    background: #E6ECF2; /*change this color - it is the background when the link is hovered over */
    color:black;
	float: none;
    font-size: 14px;

}
/*end findaride*/

/*resources*/

#resources {
background-color:#ffffff;
}


#resources ul {
    font-family: Arial, Verdana;
    font-size: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#resources ul li {
    display: block;
    position: relative;
    float: left;
}

#resources li ul {
    display: none;
}

#resources ul li a {
    display:  block;
    text-decoration: none;
    color: white;
    border-top: 1px solid white;
    padding: 5px 15px 5px 15px;
    background: #009999;
    margin-left: 1px;
}

/*#resources ul li a:hover {
background: #009999;
}*/

#resources li:hover ul {
    display: block;
    position: absolute;
    color:white;
    background-image: url(""); /*change this to the appropriate bg in the image folder */
}

#resources li:hover li {
    float: none;
    font-size: 14px;
}

#resources li:hover a { 
	background: #009999; /*change this color - it is the background when hovered over */
	color: white;
}

#resources li:hover li a:hover {
    background: #E6ECF2; /*change this color - it is the background when the link is hovered over */
    color:black;
	float: none;
    font-size: 14px;

}

/*end resources*/


/*VertNav*/

#vertnav ul {
	list-style:none;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
#vertnav img {
	
}

#vertnav ul li {
		list-style:none;
		text-align:center;
}

#vertnav ul li a {
		display:block;
		height:38px;
		line-height:38px;
}

#vertnav ul li a:hover {
	background:url(../images/ButtonNav.gif)
	}

#vertnav ul li a:active {
	background:url(../images/ButtonHov.gif)
	}
	
/*Back to Top Sticky Button*/
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
	background-color: red; /* Set a background color */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    color: white; /* Text color */							
    cursor: pointer; /* Add a mouse pointer on hover */
}

#myBtn2 {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
	background-color: white; /* Set a background color */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    color: white; /* Text color */							
    cursor: pointer; /* Add a mouse pointer on hover */
}

#myBtn:hover {
    background-color: #868686; /* Add a dark-grey background on hover */
} 	
	
#myBtn2:hover {
    background-color: #868686; /* Add a dark-grey background on hover */
} 	




/*symptoms*/

.symptoms {
    position: relative;
    display: inline-block;
    text-align: center;
    }

.symptoms-content {
    display: none;
    position: fixed;
    background-color: #c6ed9a;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }

.symptoms:hover .symptoms-content {
				
				display: block;
				
}


/*end symptoms */


/* ----------------------------------------------  #1       Style the buttons that are used to open and close the accordion panel */
button.accordion {
    background-color: #68B8FF;
    color: #002480;
    font-size: 12pt;
    cursor: pointer;
    padding: 18px;
    width: 75%;
    text-align: left;
    border: 15px;
    outline: #D7D7D7;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 button.accordion:hover {
    background-color: #e0f0ff;
}
 button.accordion.active {
    background-color: #e0f0ff;
}
button.accordion:after {
    content: '\002B';
    font-size: 20px;
    color: #df2011;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
    width: 70%;
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0 18px;
    background-color: white;
    width: 70%;
    display: none;
} 	
	
/* ------------------------------------------------------#2 Style the buttons that are used to open and close the accordion panel */
button.accordion2 {
    background-color: #6BCFB2;
    color: #002480;
    font-size: 12pt;
    cursor: pointer;
    padding: 18px;
    width: 75%;
    text-align: left;
    border: 15px;
    outline: #D7D7D7;
    transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 button.accordion2:hover {
    background-color: #6BB5CF;
}
 button.accordion2.active {
    background-color: #6BB5CF;
}
button.accordion2:after {
    content: '\002B';
    font-size: 20px;
    color: #df2011;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion2.active:after {
    content: "\2212";
    width: 70%;
}

/* Style the accordion panel. Note: hidden by default */
div.panel2 {
    padding: 0 18px;
    background-color: white;
    width: 70%;
    display: none;
} 	
/* -------------------------------------------------------     #3   Style the buttons that are used to open and close the accordion panel */
button.accordion3 {
    background-color: #68B8FF;
    color: #002480;
    font-size: 12pt;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: 15px;
    outline: #D7D7D7;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 button.accordion3:hover {
    background-color: #e0f0ff;
}
 button.accordion3.active {
    background-color: #e0f0ff;
}
button.accordion3:after {
    content: '\002B';
    font-size: 20px;
    color: #df2011;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion3.active:after {
    content: "\2212";
    width: 90%;
}

/* Style the accordion panel. Note: hidden by default */
div.panel3 {
    padding: 0 18px;
    background-color: white;
    width: 90%;
    display: none;
} 	














/* The sidebar menu 
.sidenav {
    width: 160px; /* Set the width of the sidebar 
    position: fixed; /* Fixed Sidebar (stay in place on scroll) 
    z-index: 1; /* Stay on top 
    top: 1800px; /* Stay at the top 
    left: 0;
    background-color: #111; /* Black 
    overflow-x: hidden; /* Disable horizontal scrol
    padding-top: 20px;
 }

/* The navigation menu links 
.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
}

/* When you mouse over the navigation links, change their color 
.sidenav a:hover {
    color: #f1f1f1;
}

/* Style page content 
.main {
    margin-left: 160px; /* Same as the width of the sidebar
    width: 775px;
    padding: 0px 10px;
}
*/
